<template>
  <el-dialog title="新增笔记" :visible.sync="NoteState.addDialog" :fullscreen="true" custom-class="note-dialog" @close="cancel">
    <ul class="note-top">
      <li class="flex-lrb flex-nr-c">
        <span>类型：</span>
        <el-select v-model="NoteState.addData.type_id" placeholder="请选择类型">
          <el-option v-for="item in NoteState.noteOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" class="mr-l15">选择模板</el-button>
      </li>
      <li class="flex-lrb flex-nr-c">
        <span>标题名称：</span>
        <el-input placeholder="请输入标题名称" v-model="NoteState.addData.title"></el-input>
      </li>
    </ul>
    <div class="note-box flex-lrb">
      <div class="note-box-left flex—1">
        <vue-editor v-model="NoteState.addData.content" :editorToolbar="customToolbar" @text-change="filtration"></vue-editor>
      </div>
      <div class="note-box-right flex—1">
        <div class="ql-container ql-snow">
          <div class="ql-editor" v-html="contentHtme"> </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="NoteState.addDialog = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
import { VueEditor } from "vue2-editor";
import 'vue2-editor/dist/vue2-editor.css'; //编辑器出来的样式
import { noteAdd } from "../api/module/note";
export default {
  components: { VueEditor },
  props: ['search'],
  data () {
    return {
      contentHtme: '',
      customToolbar: [
        [{ "header": [] }],
        ["bold", "link", "clean", "code-block"],
        [{ "align": '' }, { "align": 'right' }, { "align": 'center' }],
        [{ "background": [] }, { "color": [] }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
        ["image"]
      ]
    };
  },
  computed: {
    ...mapState('Note', { //使用如下 {{ NoteState.name }}  console.log(this.NoteState.name)
      NoteState: state => state
    }),
  },
  methods: {
    /**dialog关闭的时候回调 */
    cancel () {
      this.NoteState.addData._id = null;
      this.NoteState.addData.title = '';
      this.NoteState.addData.content = '';
      this.NoteState.addData.type_id = '';
    },
    /**过滤数据表格 */
    filtration () {
      /**! table转换成<table> 
        *|-- 替换成<tr><th>
        *-|- 替换成</th><th>
        *--| 替换成</th></tr>
        *|-  替换成<tr><td>
        **|* 替换成</td><td>
        *-|  替换成</td></tr>
        *table ! 替换成</table> 
        * 模板 <p>! table</p><p>|-- caicai -|- lalal --|</p><p>|- ccc1 *|* cc2 -| </p><p>table !</p>
        * */
      this.contentHtme = this.NoteState.addData.content;
      this.contentHtme = this.contentHtme.replace(/! table/g, "<table class='note-edit'>");
      this.contentHtme = this.contentHtme.replace(/\|--/g, "<tr><th>");
      this.contentHtme = this.contentHtme.replace(/-\|-/g, "</th><th>");
      this.contentHtme = this.contentHtme.replace(/--\|/g, "</th></tr>");
      this.contentHtme = this.contentHtme.replace(/\|-/g, "<tr><td>");
      this.contentHtme = this.contentHtme.replace(/\*\|\*/g, "</td><td>");
      this.contentHtme = this.contentHtme.replace(/-\|/g, "</td></tr>");
      this.contentHtme = this.contentHtme.replace(/table !/g, "</table>");
    },
    /**确定 */
    submit () {
      noteAdd(this.NoteState.addData).then(() => {
        this.NoteState.addDialog = false;
        this.$emit('search')
      })
    }
  },
  mounted () {



  },
};
</script>

<style>
.note-dialog {
  color: rgba(0, 0, 0, 0.8);
  background: #f5f5f5;
}
.note-top {
  background: #fff;
  padding: 12px 12px 0 12px;
  border-radius: 5px;
  margin-bottom: 12px;
}
.note-top li {
  padding-bottom: 12px;
}
.note-top span {
  width: 100px;
  text-align: right;
  flex: 0 0 auto;
}
/* .note-top .el-input-group__prepend {
  width: 100px;
  text-align: center;
} */
.note-box {
}
.note-box-left,
.note-box-right {
  padding: 10px 16px;
}
.note-box-right {
  background: #fff;
  border-radius: 8px;
}
/* *编辑器里面的样式*/
.note-edit {
  border-collapse: collapse;
  width: 100%;
  /* border: 1px solid; */
}
.note-edit th {
  font-weight: 600;
  background-color: #eff3f5;
  border: 1px solid #ddd;
  text-align: center;
  padding: 8px;
}
.note-edit td {
  padding: 8px;
  border: 1px solid #ddd;
}
</style>